<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="../template/index.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
	<ui:define name="title">
		<title>The Change | Danh sách lương chi tiết</title>
		<script>
        	$('document').ready(function(){
        		$('.result-paging').change(function(){
        			$("#resultForm\\:paging-click").click();
        		});
        	});
        </script>
	</ui:define>
	<ui:define name="lcontent">
		<ui:include src="/template/menu-left/human-resources.xhtml"></ui:include>
	</ui:define>
	<ui:define name="rcontent">
		<f:event listener="#{salaryStructure.onload}" type="preRenderView"/>
		<f:event listener="#{utilBean.initDepartment}" type="preRenderView"/>
		<span class="rtitle">Danh sách lương chi tiết</span>
		<hr />		
		<h:form id="searchForm">
		<div id="searchPanel" class="search-panel">
        		<table class="input-column w100">
        			<tr>
        				<td class="w50">
				        	<span class="italic block">
				        		Nhấn vào tên nhân viên để có lập bảng lương chi tiết (nếu chưa có)
				        		hoặc cập nhật bảng lương chi tiết mới (nếu đã có)
				        		(Bạn có thể sử dụng lọc theo tên hoặc lọc theo từng phòng ban)
				        	</span>
				        </td>
        				<td class="w50">        					
				        	<span class="search-panel-title">Họ Tên</span>
				        	<h:inputText styleClass="input w80" value="#{salaryStructure.nameSearch}"></h:inputText>
				        	<span class="search-panel-title">Chọn bộ phận</span>
				        	<h:selectOneMenu styleClass="input w80" value="#{salaryStructure.departmentSearch}">
				        		<f:selectItem itemValue="" itemLabel="Tất cả"></f:selectItem>
				        		<f:selectItems value="#{utilBean.listDepartment}"></f:selectItems>
				        	</h:selectOneMenu>
        				</td>
        			</tr>
        		</table>       	
	        	
	        	<span class="clear"></span>
	        	<h:commandButton value="Tìm kiếm" class="button green-bt" action="#{salaryStructure.search}">
	        	</h:commandButton>
	        	<span class="clear"></span>
        </div>
		</h:form>
		
		<h:form id="resultForm" rendered="#{salaryStructure.listSalaryStructure ne null}">
			<div class="list">
			<ui:repeat var="var" value="#{salaryStructure.listSalaryStructure}">
				<div class="list-item">
					<table>
						<tr>
							<td class="list-item-checked">
								<h:selectBooleanCheckbox styleClass="cbx"></h:selectBooleanCheckbox>
							</td>
							<td>
								<h:commandLink styleClass="list-item-click" actionListener="#{salaryStructure.choose}">
									<h:outputText value="#{var.employee.lastname} #{var.employee.firstname}"/>
									<f:attribute name="object" value="#{var}"></f:attribute>
								</h:commandLink>
								<span class="list-item-title">| Phòng ban: #{var.employee.department.name} | Chức vụ: #{var.employee.designation.name}</span><br />
								<span class="clear"/> 
								<h:panelGroup rendered="#{var.salaryStructure ne null}">
									<h:commandLink styleClass="status green-bg" rendered="#{var.salaryStructure.status eq 1}">
										<h:outputText value="Đã có"/>
									</h:commandLink>
									<span class="list-item-created clear" >
										Được tạo bởi <h:outputText value="#{var.salaryStructure.created_by}"/> vào 
										<h:outputText value="#{var.salaryStructure.created_by}">
											<f:convertDateTime pattern="dd/MM/yyyy hh:mm:ss"></f:convertDateTime>
										</h:outputText>
										| Thay đổi bởi 
										<h:outputText value="#{var.salaryStructure.modified_by}"/> vào
										<h:outputText value="#{var.salaryStructure.modified_date}">
											<f:convertDateTime pattern="dd/MM/yyyy hh:mm:ss"></f:convertDateTime>
										</h:outputText>
									</span>
								</h:panelGroup>
								<h:panelGroup rendered="#{var.salaryStructure eq null}">
									<h:commandLink styleClass="status orange-bg">
										<h:outputText value="Chưa có"/>
									</h:commandLink>
									<span class="list-item-created clear">
										Bạn có thể nhấn vào tên để lập lương chi tiết cho người này
									</span>
								</h:panelGroup>
							</td>
						</tr>
					</table>
				</div>
			</ui:repeat>
			<div class="nav-page-bt result-paging">
				Trang
				<h:selectOneMenu value="#{salaryStructure.currentPage}">
					<f:selectItems value="#{salaryStructure.pages}" ></f:selectItems>
				</h:selectOneMenu>
				<h:commandLink id="paging-click" styleClass="hide" action="#{employee.paging}"></h:commandLink>
			</div>
			</div>
		</h:form>
	</ui:define>
</ui:composition>